// 权限控制

import router from '@/router'
import store from '@/store'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { asyncRoutes } from '@/router' // 所有的动态路由

// 关闭进度条圆形指示器
NProgress.configure({ showSpinner: false })

// 前置导航守卫
// to: 即将要进入的路由, route
// from: 当前要离开的路由, route
const whiteList = ['/login', '/404']
router.beforeEach(async(to, from, next) => {
  // 开启进度条
  NProgress.start()
  const { token, userInfo } = store.state.user
  // console.log(token, userInfo)
  // 在权限拦截处获取用户信息存储到vuex中
  if (token) {
    // 如果有token没有用户信息
    if (!userInfo.userId) {
      await store.dispatch('user/getUserInfo')
      // 角色权限-能访问的路由规则
      const { menus } = store.state.user.userInfo.roles
      // 筛选出角色能访问的模块
      const otherRoutes = asyncRoutes.filter(item => menus.includes(item.children[0].name))
      // 动态添加路由-把404放这里是防止刷新的时候动态路由没有配置好跳到404
      router.addRoutes([...otherRoutes, { path: '*', redirect: '/404', hidden: true }])
      // 把动态添加的路由存储到vuex中, 这样左侧菜单栏就会渲染
      store.commit('permission/setRoutes', otherRoutes)
      // 重新访问路由, 解决白屏问题: 刷新时路由还没动态添加好, 就放行了, 导致白屏
      next({ ...to, replace: true })
    }
    // 1. 有token的情况
    // 1.1 判断是否是去登录页, 如果去登录页拦截到首页
    if (to.path === '/login') {
      next('/')
      // 结束进度条
      NProgress.done()
    } else {
      // 1.2 如果访问其他页面放行
      next()
    }
  } else {
    // 2. 没有token的情况
    // 2.1 判断是否去白名单路由
    if (whiteList.includes(to.path)) {
      // 白名单放行
      next()
    } else {
      // 2.2 不是白名单拦截到登录页
      next('/login')
      NProgress.done()
    }
  }
})

// 后置导航守卫, 路由跳转后执行
// next() 放行的会走这里
// next('path') 拦截走的则是中断了当前导航, 不会走到这里
router.afterEach((to, from) => {
  // 放行的进度条结束
  NProgress.done()
})
